<template>
<!-- 商品排序 -->
  <div>
        <van-dropdown-menu >
          <van-dropdown-item v-model="value1" disabled :options="option1" />
          <van-dropdown-item title="价格" v-model="value2" :options="option2" @change="priceChange"/>
          <van-dropdown-item title="分类" v-model="value3" :options="option3" @change="typeChange"/>
        </van-dropdown-menu>
      <div class="searchtip">
          <div class="searchtip-content">
            <van-grid :border="false" :column-num="2" >
               <van-grid-item v-for="v in SearchTiplist" :key="v.id" @click="onClick(v.id)">
                  <van-image :src="v.list_pic_url" />
                      <div class="desc">{{v.name}}</div>
                      <div class="price">￥ {{v.retail_price}}.00 元</div>
               </van-grid-item>
             </van-grid>
          </div>
       </div>
   </div>
</template>

<script>
export default {
    data() {
        return {
          value1: 0,
          value2: 'a', 
          value3: 'a',
          option1: [
            { text: '综合', value: 0 },
           ],
          option2: [
           { text: '全部', value: 'a' },
           { text: '价格由高到低', value: 'b' },
           { text: '价格由低到高', value: 'c' },
          ],
          option3: [
           { text: '全部', value: 'a' },
           { text: '居家', value: 'b' },
          ],
        };
    },
    props:['SearchTiplist'],
    methods:{
       onClick(id){
           this.$router.push({
               path:'/details',
               query:{
                  id:id
               }
           })
       },
       priceChange(value){
        //  console.log(value);
           this.$emit('parentchange',value)
       },
       typeChange(){

       }
    }
}
</script>

<style lang="less">
.searchtip{
     width: 100%;
     background: white;
    //  overflow: hidden;
      overflow-y: scroll;
  }
.searchtip-content .desc{
     font-size: 13px;
     text-align: center;
     margin-bottom: .5rem;
}
.searchtip-content .price{
      font-size: 14px;
      font-family: '宋体';
      text-align: center;
      color: darkred;
 }
</style>